.fa-loading {
	background-color: var(--wot-overlay-color-light);
	bottom: 0;
	left: 0;
	margin: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity var(--wot-transition-duration);
	z-index: 2001;
	@keyframes loading-rotate {
		0% {
			clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
		}
		12.5% {
			clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
		}
		25% {
			clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
		}
		50% {
			clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
		}
		62.5% {
			clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
		}
		75% {
			clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
		}
		100% {
			clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
		}
	}
	@keyframes loading-dash {
		0% {
			transform: scaleY(1) rotate(0deg);
		}
		49.99% {
			transform: scaleY(1) rotate(135deg);
		}
		50% {
			transform: scaleY(-1) rotate(0deg);
		}
		100% {
			transform: scaleY(-1) rotate(-135deg);
		}
	}
	.fa-loading__box {
		display: flex;
		flex-direction: column;
		gap: 5px;
		align-items: center;
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		.box-icon {
			width: 28px;
			aspect-ratio: 1;
			border-radius: 50%;
			border: 2px solid var(--wot-color-primary);
			animation:
				loading-rotate 0.8s infinite linear alternate,
				loading-dash 1.6s infinite linear;
		}
		.box-text {
			color: var(--wot-color-primary);
			font-size: var(--wot-font-size-base);
			margin: 3px 0;
		}
	}
}

.fa-loading-mask {
	background-color: var(--wot-mask-color);
	position: absolute;
}
